<template>
  <div class="navfoot">
    <div class="submmit">
      <el-row type="flex" justify="space-between">
        <span style="float:left;display:block; margin-left:10px;color:#326f8f">
          <i class="el-icon-warning" style="opacity:1;color:#326f8f;"/>
          清秋主题、默认主题A、默认主题B、雅致简洁之外的主题，请前往 [运营] - [编辑区管理] 中进行编辑。
        </span>
        <el-button type="primary" style="float:right;" @click="add = true">新增底部导航</el-button>
      </el-row>
    </div>
    <subTable :table-label="tableLabel" :table-data="tableData">
      <!-- 调用公告组件(EL-table) slot-button  插入需要按钮模板-->
      <el-table-column slot="button" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="updateCLick(scope.row)">编辑
          </el-button>
          <el-button
            @click="deleteCLick(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </subTable>


    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="handleEdit" title="编辑底部导航" width="38%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="Navigation" label-position="right" label-width="80px" ref="updateForm">
          <el-form-item label="名称">
            <el-input v-model="Navigation.name" style="width:80%"/>
            <el-input v-model="Navigation.type" type="hidden"/>
            <el-input v-model="Navigation.id" type="hidden"/>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="Navigation.url" style="width:80%"/>
          </el-form-item>
          <el-form-item label="新开窗口">
            <el-radio-group v-model="Navigation.isNewWin">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="Navigation.isOpen">
              <el-radio label="1">开启</el-radio>
              <el-radio label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEdit = false">取 消</el-button>
        <el-button type="primary" @click="updateData(),handleEdit = false">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->


    <!-- 删除弹框 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">
        确定要删除吗?
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除弹框 -->


    <!-- 弹框 -->
    <el-dialog :visible.sync="add" title="新增" width="38%">
      <div style="width:100%;float:left;height:300px;">
        <el-form :model="Navigation" label-position="right" label-width="80px" ref="dataForm">
          <el-form-item label="名称">
            <el-input v-model="Navigation.name" style="width:80%"/>
            <el-input v-model="Navigation.type" type="hidden"/>
          </el-form-item>
          <el-form-item label="链接地址">
            <el-input v-model="Navigation.url" style="width:80%"/>
          </el-form-item>
          <el-form-item label="新开窗口">
            <el-radio-group v-model="Navigation.isNewWin">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="Navigation.isOpen">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add = false">取 消</el-button>
        <el-button type="primary" @click="createData(),add = false">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 弹框 -->


    <div class="foot">
      <ul>
        <li v-for="(item,index) in footContent" :key="index"> {{ item.label }} : {{ item.value }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import subTable from "@/components/Eltable";
  import {add, deleteNavigation, list, update} from "@/api/system/topNavigation"; // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    components: {
      subTable
    },
    data() {
      return {
        Navigation: {
          id: '',
          name: '',
          url: '',
          isNewWin: 1,
          isOpen: 1,
          type: 'foot',
        },
        tableLabel: [
          {
            label: "名称",
            prop: "name"
          },
          {
            label: "新开窗口",
            prop: "isNewWin"
          },
          {
            label: "状态",
            prop: "isOpen"
          },
        ],
        add: false,
        handleEdit: false,
        handleDelete: false,
        deleteRow: '',
        // 列表编辑按钮
        updateCLick(row) {
          this.handleEdit = true;
          if (row.isNewWin === '是') row.isNewWin = '1';
          if (row.isNewWin === '否') row.isNewWin = '0';
          if (row.isOpen === '开启') row.isOpen = '1';
          if (row.isOpen === '关闭') row.isOpen = '0';
          this.Navigation = Object.assign({}, row)
        },
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        },
        tableData: [],
        footContent: [
          {
            label: "关于我们",
            value: "域名/eduxcloud/eduCustomPageAction!aboutUs.action"
          },
          {
            label: "加入我们",
            value: "域名/eduxcloud/eduCustomPageAction!joinUs.action"
          },
          {
            label: "合作申请",
            value: "域名/eduxcloud/eduCustomPageAction!cooperationAsk.action"
          },
          {
            label: "意见反馈",
            value: "域名/eduxcloud/eduIndexAction!goIndex.action"
          }
        ]
      };
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        list('foot').then(response => {
          if (response.data && response.data.items) {
            this.tableData = response.data.items.filter(item => {
              if (item.tenantId === getTenantId()) return true
            })
            this.tableData.map(item => {
              if (item.isNewWin === '1') item.isNewWin = '是';
              if (item.isNewWin === '0') item.isNewWin = '否';
              if (item.isOpen === '1') item.isOpen = '开启';
              if (item.isOpen === '0') item.isOpen = '关闭';
            })
            this.total = this.tableData.length;
            this.listFilter = this.tableData;
          }
        });
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.Navigation.tenantId = getTenantId();
            add(this.Navigation).then(() => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      updateData() {
        this.handleEdit = false;
        this.$refs['updateForm'].validate((valid) => {
          if (valid) {
            update(this.Navigation).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        })
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteNavigation(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.fetchData();
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  .navfoot {
    .submmit {
      width: 100%;
      height: 70px;
      line-height: 36px;
      background-color: #d9edf7;
      padding-right: 30px;
      padding-top: 17px;
    }

    .foot {
      margin-top: 20px;
      padding: 15px 15px;
      border-radius: 5px;
      background-color: #d9edf7;
      color: #326f8f;
      border-left: 5px solid #50bfff;

      ul {
        text-decoration: none;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          margin-top: 5px;
        }
      }
    }
  }
</style>
